<!DOCTYPE HTML>
<html>
  <head>
    <title>Dealfinder</title>
    <link rel=StyleSheet href="Stylesheet.css" title="Contemporary">
    <style type="text/css">@import "jquery.countdown.css";</style> 
  <script type="text/javascript" charset="utf-8">
       /*function onLoad(){
            document.addEventListener("deviceready", onDeviceReady, true);
       }
       function onDeviceReady(){
            navigator.notification.alert("PhoneGap is working");
       }*/

      var NumberOfImages;/**Number of images currently on the carousel*/
   		NumberOfImages = 0;
   		var leftMost = 1; /**The number of the image on the left of the carousel*/
   		var rightMost = 3;/**The number of the image on the right of the carousel*/
   		Images = new Array(); /**Array of the images for a current location*/
   		var ImagesAsText;/**Herlp string for creating images*/
   		var IdAsText;/**Help string for querying Image objects*/
  </script>
  <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> 
  <script type="text/javascript" charset="utf-8" src="jquery-1.7.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
  <script type="text/javascript" src="jquery.countdown.min.js"></script>
  <script type = "text/javascript" src = "getDeals.js"></script>
  <script type="text/javascript" charset="utf-8" src="application.js"></script>
  </head>
  <body>
    <h1>Dealfinder</h1>
  <div class="container">
		<div class = "arrowContainer" id = "leftArrowContainer">
		 <img class="arrow" id = "leftArrow" src = "arrow_left.png" />
		</div>
		<div id = "carouselContainer">
		</div>
		<div class = "arrowContainer" id = "rightArrowContainer">
			<img class="arrow" id = "rightArrow" src = "arrow_right.png" />
		</div>
		</div>
	  <nav>
	    <h2>Categories</h2>
	    <div id="radioDiv">
	    </div>
	  </nav>
	    <div class= "Display"  id="map_canvas"></div>
  		<div class = "Display" id = "dealsDisplay">
  			<img id = "displayImage"/>
  			<div class = "dealData" id = "dealName">
  			</div>
  			<div class = "dealData" id = "originalPrice">
  			Original Price
  			</div>
  			<div class = "dealData" id = "dealPrice">
  			Actual Price
  			</div>
  			<div class = "dealData" id = "sellingCompany">
  			Vendor 
  			</div>
  			<div class = "dealData" id = "startDate">
  			Start Date
  			</div>
  			<div class = "dealData" id = "endDate">
  			End Date
  			</div>
  			<div class = "dealData" id = "dealLocation">
  			Location
  			</div>
  			<div class = "dealData" id = "Description">
  			Description
  			</div>
  			<div class = "dealData">
  			  <div id="timerDiv"></div>
  			  <input id="firstName">First name</input>
  			  <input id="lastName">Last Name</input>
  			  <input id="phoneNumber">Phone Number</input>
  			<button type = "button" id="submitDeal"> Purchase the Deal </button>
  			<button type = "button" id = "backMap"> Back to the Map </button>
  			</div>
	  </div>
  </body>
</html>